<template>
  <div
    :class="{
      ...stateClass,
      blue: answerState === EAnswerState.ANSWERING
    }"
    class="message-pending"
  >
    <!-- <a-timeline-item> -->
    <!-- @todo 加载状态，多种样式的 -->
    <!-- <span> {{ props.hint }} </span> -->

    <!-- <transition name="changeShow"> -->
    <div v-if="props.answerState === EAnswerState.THINKING" class="thinking-container">
      <transition name="changeShow">
        <div class="flex mb12">
          <div class="title mr6">{{ props.hint }}</div>
          <MyLoading />
        </div>
      </transition>
      <a-timeline class="content" v-if="props.thinkingContent?.length">
        <transition-group name="changeShow" appear>
          <a-timeline-item v-for="(item, index) in props.thinkingContent" :key="index">
            <template #dot><i class="sub_dot"></i></template>
            <div>{{ item }}</div>
          </a-timeline-item>
        </transition-group>
      </a-timeline>
    </div>
    <!-- </transition> -->
    <div class="searching-container" v-if="props.answerState === EAnswerState.SEARCHING">
      <div class="flex mb12">
        <div class="title mr6">{{ props.hint }}</div>
        <MyLoading />
      </div>
      <div class="content" v-if="props.searchingList?.length">
        <transition-group name="changeShow" appear>
          <div v-for="(sItem, sIndex) in props.searchingList" :key="sIndex">
            <div class="flex mb12">
              <div class="search-icon mr6"></div>
              <div class="sub-title">{{ sItem.title }}</div>
            </div>
            <Ellipsis v-if="sItem.content?.length" :historyData="sItem.content" />
            <div class="count" v-if="sItem.status?.length">{{ sItem.status }}</div>
          </div>
        </transition-group>
      </div>
    </div>
    <div v-else-if="props.hint" class="thinking-container">
      <div class="flex mb12">
        <div class="title mr6">{{ props.hint }}</div>
        <MyLoading />
      </div>
    </div>

    <!-- </a-timeline-item> -->
  </div>
</template>
<script setup lang="ts">
import { DISPLAY_STATUS, EAnswerState, type MainItemVo } from '@/api/type'
import { useMessageHook } from './useMessageHook'
import MyLoading from './MyLoading.vue'
import { computed } from 'vue'
const props = defineProps<MainItemVo>()
const { isAnswer, stateClass } = useMessageHook(props)
const showAnswerStatus = computed(() => {
  if (props.answerState === EAnswerState.SEARCHING && props.resourceIds?.length) {
    return `正在阅读${props.resourceIds?.length}篇文档`
  }
  return (
    DISPLAY_STATUS.find((o) => o.code === props.answerState)?.label ||
    (props.answerState && props.answerState == 7 && props.replyState !== 2 ? '正在回答中' : '')
  )
})
</script>
<style lang="scss" setup>
.message-pending {
  font-size: 14px;
  // font-weight: 500;
  // font-weight: bold;
  line-height: 24px;

  /* 字体/黑 */
  color: #292929;
  // background: #f8fafc;
  display: flex;
  align-items: center;
  // margin-bottom: 16px;
  // margin-top: 16px;

  border-radius: 8px;
  border-top-left-radius: 0;
  padding: 0px 0px 10px;
  span {
    margin-left: 8px;
  }
  &.blue {
    margin-top: 8px;
    color: #2a8bf2;
    padding: 6px 12px;
  }
  .thinking-container,
  .searching-container {
    min-width: 100%;
    .title {
      font-size: 16px;
      font-weight: bold;
      color: #0d1c2e;
      // margin-bottom: 12px;
    }
    .content {
      // min-width: 400px;
      padding: 16px 20px;
      background-color: #f5f6f8;
      .sub-title {
        font-size: 14px;
        font-weight: bold;
        color: #0d1c2e;
      }
      .count {
        font-size: 14px;
        font-weight: 400;
        color: #9a9eab;
      }
      .ant-timeline-item-head {
        background-color: transparent;
      }
      .ant-timeline-item-tail.ant-timeline-item-tail.ant-timeline-item-tail {
        border-left: 2px dashed #faad14;
      }
      .ant-timeline-item-content.ant-timeline-item-content {
        top: -5.001px;
      }
      .search-icon {
        width: 12px;
        height: 12px;
        background: url('@/assets/searching_icon.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .sub_dot {
      display: inline-block;
      width: 16px;
      height: 16px;
      background: url('@/assets/sub_timeline_item.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}

@for $i from 1 through 30 {
  .changeShow-enter-active:nth-child(#{$i}) {
    animation: changeShow #{$i * 0.8}s;
  }
  .changeShow-leave-active:nth-child(#{$i}) {
    animation: changeShow #{$i * 0.8}s reverse;
  }
}

@keyframes changeShow {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>
